<template>
	<view id="v1">
			<view class="box" v-for="v in data" key="v.orderNum">
				<view class="box1">
					<view class="t1">
						<text>订单号：{{v.orderNum}}</text>
						<text>{{v.submitTime}}</text>
					</view>
					<view class="t2">
						<text>{{v.orderStatus}}</text>
					</view>
				</view>
				<view class="box2" @click="getNum(v.orderNum)">
					<view class="card">
						<image :src="v.courseUrl"></image>
					</view>
					<view class="content">
						<view>{{v.courseName}}</view>
						<view>￥{{v.orderPrice}}/10课时</view>
					</view>
				</view>
				<view class="box3">
					<view @click="dialogToggle">
						<text>取消订单</text>
					</view>
					<view @click="getorder(v.orderNum)">
						<text>立即支付</text>
					</view>
				</view>
			</view>
	<BottomText/>
	</view>
	<view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog title="" cancelText="取消" confirmText="确定" content="确定要取消订单吗？" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import BottomText from '@/components/BottomText/BottomText.vue';
	import http from '../../utils/http';
	export default {
		data(){
			return{
				data:[]
			}
		},
		methods: {
			dialogToggle(){
				this.$refs.alertDialog.open()
			},
			dialogClose(){
				uni.showToast({
					title:"已取消",
					icon:"https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1204.png"
				})
			},
			getNum(Num){
				uni.navigateTo({
					url: `/pages/Course-Order-Details/Course-Order-Details?Num=${Num}`
				});
			},
			getorder(order){
				uni.navigateTo({
					url: `/pages/Confirm-Order/Confirm-Order?order=${order}`
				});
			},
		},
		mounted() {
			http({
				url:'/order/myCourseInfo01',
				params:{
					nickname:'这心不属于我',
					orderStatus:'待支付'
				}
			}).then((res)=>{
				this.data=[res.data]
			})
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f9f9f9;
	}

	#v1 {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		height: 100%;
		width: 100%;
		background-color: rgba(242, 242, 242, 0.498039215686275);

		.box {
			width: 676rpx;
			height: 368rpx;
			_border: 1px solid red;
			border-radius: 12rpx;
			background-color: rgba(255, 255, 255, 1);
			box-shadow: 1px 2px 10px rgb(242 242 242 / 50%);
			margin -top: 30rpx;
			;
			box-shadow: 0px 2px 10px rgb(242 242 242 / 50%);
		}
	}

	.box1 {
		margin: 28rpx 24rpx 0 24rpx;
		display: flex;
		justify-content: space-between;

		.t1 text:nth-child(1) {
			font-size: 24rpx;
			color: rgb(153, 153, 153);
			font-family: 思源黑体;
			font-weight: 400;
		}

		.t1 text:nth-child(2) {
			font-size: 24rpx;
			color: rgb(153, 153, 153);
			font-family: 思源黑体;
			margin-left: 24rpx;
			font-weight: 400;
		}

		.t2 text {
			font-size: 24rpx;
			color: rgb(255, 0, 0);
			font-weight: 700;
		}
	}

	.box2 {
		display: flex;

		.content {
			margin-left: 24rpx;
			margin-top: 60rpx;

			view:nth-child(1) {
				font-size: 28rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 20rpx;
			}
		}

		.content view:nth-child(2) {
			font-size: 28rpx;
			font-weight: 700;
			color: rgb(239, 179, 54);
		}
	}

	.card {
		border-radius: 8rpx;
		margin-left: 24rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 174rpx;
			height: 128rpx;
		}
	}

	.box3 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 34rpx;

		view:nth-child(1) {
			width: 148rpx;
			height: 56rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #2f78ff;
			border: 1px solid rgb(47, 120, 255);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
		}

		view:nth-child(2) {
			width: 148rpx;
			height: 56rpx;
			border-radius: 8rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #ffffff;
			background-color: #2f78ff;
			border: 1px solid rgb(47, 120, 255);
			box-shadow: rgba(47, 120, 255, 0.298) 0px 2px 10px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
